<template>
    <section class="chart-container">
            <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			    <el-form :inline="true" :model="filters" :rules="rules2" ref="filters">
                    <el-form-item prop="name"  :rules="[{ required: true, message: '姓名不能为空'}]">
                        <el-input v-model="filters.name" placeholder="姓名" ></el-input>
                    </el-form-item>
                    <el-form-item prop="idcard" :rules="[{ required: true, message: '身份证不能为空'}]">
                        <el-input v-model="filters.idcard" placeholder="身份证" ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('filters')">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        当前病号：{{patientName}}
                    </el-form-item>
                    <div style="float:right;">
                        <el-button type="primary" @click.native="showRecord">查看用药记录</el-button>
                        <el-button type="success" @click.native="addRecord">添加用药记录</el-button>
                        <el-button type="danger" @click.native="consultationOver" :loading="editLoading">会诊结束</el-button>
                    </div>
                </el-form> 
		    </el-col>
            <el-col :span="12">
                <div id="chartLine" style="width:100%; height:340px;"></div>
            </el-col>
            <el-col :span="12">
                <div id="chartLine2" style="width:100%; height:340px;"></div>
            </el-col>
            <el-col :span="12">
                <div id="chartLine3" style="width:100%; height:340px;"></div>
            </el-col>
            <el-col :span="12">
                <div id="chartLine4" style="width:100%; height:340px;"></div>
            </el-col>  
        <!-- 查看用药记录界面 -->
        <el-dialog title="查看用药记录" v-model="showRecordVisible" :close-on-click-modal="false">
			<el-table :data="record" highlight-current-row  style="width: 100%;">
			<el-table-column prop="dname" label="药名">
			</el-table-column>
			<el-table-column prop="use_method" label="使用方法">
			</el-table-column>
			<el-table-column prop="ddate" label="用药日期" sortable>
			</el-table-column>
		</el-table>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="showRecordVisible = false">确定</el-button>
			</div>
		</el-dialog>

        <!-- 添加用药记录界面 -->
        <el-dialog title="添加用药记录" v-model="addRecordVisible" :close-on-click-modal="false">
			<el-form :model="editRecord" label-width="100px" ref="editRecord">
				<el-form-item label="药名">
					<el-input v-model="editRecord.dname" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="使用方法" >
					<el-input v-model="editRecord.use_method" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="开药日期">
                    <el-date-picker type="date" placeholder="选择日期" v-model="editRecord.ddate" :picker-options="pickerOptions0"></el-date-picker>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addRecordVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">添加</el-button>
			</div>
		</el-dialog>
    </section>
</template>

<script>
    import util from '../../common/js/util'
    import echarts from 'echarts'
    import { healthData,getRecord,changestatus,addMdtRecord,queryNid } from '../../api/api';
    export default {
        data() {
            return {
                pickerOptions0: {
					disabledDate(time) {
						return time.getTime() < Date.now() - 8.64e7;
					}
				},
                filters: {
					name: '',
                    idcard: ''
				},
                patientName : '',
                chartLine: null,
                chartLine2: null,
                chartLine3: null,
                chartLine4: null,
                bptime:[],
                maxbp:[],
                minbp:[],
                bfintime:[],
                bloodfat:[],
                bgintime:[],
                bloodglucose:[],
                hrintime:[],
                heartrate:[],
                record:[],
                showRecordVisible: false,
                addRecordVisible: false,
                addLoading:false,
                editRecord:{
                    dname:'',
                    use_method:'',
                    ddate:''
                },
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.gethealthData();
                    }else{
                        return false;
                    }
                });
            },
            gethealthData() {
                let para = {
                    oid : 0,
                    name:this.filters.name,
                    idcard:this.filters.idcard
                };
                var patient = sessionStorage.getItem('patient');
                if(patient){
                    patient = JSON.parse(patient);
                    para.oid = patient.oid;
                    this.patientName = patient.realname;
                };
                healthData(para).then((res) => {
                    if(res.code === 2){
                        this.$message({
                        message : res.msg,
                        type : 'success'
                        });

                    }
                    if(res.code === 3){
                        this.$message({
                        message : res.msg,
                        type : 'error'
                        });
                    }
                        this.bptime = res.data.bpintime;
                        this.maxbp = res.data.bpmax;
                        this.minbp = res.data.bpmin;
                        this.chartLine.setOption({
                            title: {
                                text: '近七次测量血压变化',
                                subtext: '来自血压表数据'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data:['最高血压','最低血压']
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    dataZoom: {},
                                    dataView: {readOnly: false},
                                    magicType: {type: ['line', 'bar']},
                                    restore: {},
                                    saveAsImage: {}
                                }
                            },
                            xAxis:  {
                                type: 'category',
                                boundaryGap: false,
                                data: this.bptime
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value} mmHg'
                                }
                            },
                            series: [
                                {
                                    name:'最高血压',
                                    type:'line',
                                    data:this.maxbp,
                                    markPoint: {
                                        data: [
                                            {type: 'max', name: '最大值'},
                                            {type: 'min', name: '最小值'}
                                        ]
                                    },
                                    markLine: {
                                        data: [
                                            {type: 'average', name: '平均值'}
                                        ]
                                    }
                                },
                                {
                                    name:'最低血压',
                                    type:'line',
                                    data:this.minbp,
                                    markPoint: {
                                        data: [
                                            {type: 'max', name: '最大值'},
                                            {type: 'min', name: '最小值'}
                                        ]
                                    },
                                    markLine: {
                                        data: [
                                            {type: 'average', name: '平均值'}
                                        ]
                                    }
                                }
                            ]
                        });
                        this.hrintime = res.data.hrintime;
                        this.heartrate = res.data.heartrate;
                        this.chartLine2.setOption({
                            title: {
                                text: '近七次测量心率变化',
                                subtext: '来自心率表数据'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data:['心率']
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    dataZoom: {},
                                    dataView: {readOnly: false},
                                    magicType: {type: ['line', 'bar']},
                                    restore: {},
                                    saveAsImage: {}
                                }
                            },
                            xAxis:  {
                                type: 'category',
                                boundaryGap: false,
                                data: this.hrintime
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value} bpm'
                                }
                            },
                            series: [
                                {
                                    name:'心率',
                                    type:'line',
                                    data:this.heartrate,
                                    markPoint: {
                                        data: [
                                            {type: 'max', name: '最大值'},
                                            {type: 'min', name: '最小值'}
                                        ]
                                    },
                                    markLine: {
                                        data: [
                                            {type: 'average', name: '平均值'}
                                        ]
                                    }
                                }
                            ]
                        });
                        this.bgintime = res.data.bgintime;
                        this.bloodglucose = res.data.bloodglucose;
                        this.chartLine3.setOption({
                            title: {
                                text: '近七次测量血糖变化',
                                subtext: '来自血糖表数据'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data:['血糖']
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    dataZoom: {},
                                    dataView: {readOnly: false},
                                    magicType: {type: ['line', 'bar']},
                                    restore: {},
                                    saveAsImage: {}
                                }
                            },
                            xAxis:  {
                                type: 'category',
                                boundaryGap: false,
                                data: this.bgintime
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value} mmol/l'
                                }
                            },
                            series: [
                                {
                                    name:'血糖',
                                    type:'line',
                                    data:this.bloodglucose,
                                    markPoint: {
                                        data: [
                                            {type: 'max', name: '最大值'},
                                            {type: 'min', name: '最小值'}
                                        ]
                                    },
                                    markLine: {
                                        data: [
                                            {type: 'average', name: '平均值'}
                                        ]
                                    }
                                }
                            ]
                        });
                        this.bfintime = res.data.bfintime;
                        this.bloodfat = res.data.bloodfat;
                        this.chartLine4.setOption({
                            title: {
                                text: '近七次测量血脂变化',
                                subtext: '来自血脂表数据'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data:['总胆固醇(TC)']
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    dataZoom: {},
                                    dataView: {readOnly: false},
                                    magicType: {type: ['line', 'bar']},
                                    restore: {},
                                    saveAsImage: {}
                                }
                            },
                            xAxis:  {
                                type: 'category',
                                boundaryGap: false,
                                data: this.bfintime
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value} mmol/l'
                                }
                            },
                            series: [
                                {
                                    name:'总胆固醇(TC)',
                                    type:'line',
                                    data:this.bloodfat,
                                    markPoint: {
                                        data: [
                                            {type: 'max', name: '最大值'},
                                            {type: 'min', name: '最小值'}
                                        ]
                                    },
                                    markLine: {
                                        data: [
                                            {type: 'average', name: '平均值'}
                                        ]
                                    }
                                }
                            ]
                        });                    
                });
                getRecord(para).then((res) => {
                    this.record = res.data.mdList;
                    if(para.oid !== res.data.oid){
                        if(this.patient){
                            sessionStorage.removeItem('patient');
                        }
                        this.patientName = this.filters.name;
                        var user = sessionStorage.getItem('user');
				        user = JSON.parse(user);
                        let para = {
                            doctorid : user.did,
                            oid : res.data.oid
                        };
                        queryNid(para).then((res2) => {
                            if(res2.code !== 0){
                                this.$message({
                                message : res2.msg,
                                type : 'error'
                                });
                            }else{
                                let patient = {
                                    r_id : res2.data,
                                    oid : res.data.oid,
                                    realname : this.filters.name
                                };
                                sessionStorage.setItem('patient', JSON.stringify(patient));
                            };
                        });
                    };
                });
            },
            showRecord : function () {
                this.showRecordVisible = true;
            },
            addRecord : function () {
                this.addRecordVisible = true;
            },
            addSubmit : function() {
				this.$confirm('确认添加吗？', '提示', {}).then(() => {
					this.addLoading = true;
                    var user = sessionStorage.getItem('user');
                    user = JSON.parse(user);
                    let para = {
                        did : user.did,
                        oid : 0,
                        r_id : 0
                    };
                    var patient = sessionStorage.getItem('patient');
                    if(patient){
                        patient = JSON.parse(patient);
                        para.oid = patient.oid;
                        para.r_id = patient.r_id;
                    };
					para = Object.assign(para, this.editRecord);
                    para.ddate = (!para.ddate || para.ddate == '') ? '' : util.formatDate.format(new Date(para.ddate), 'yyyy-MM-dd');
                    if(para.oid === 0){
                        this.$message({
                             message : "当前没有会诊病号，无法添加",
                            type : 'error'
                        });
                        this.addRecordVisible = false;
                    }else{
                        addMdtRecord(para).then((res) => {
                            this.addLoading = false;
                            let { code , msg  } = res;
                            if ( code !== 0 ) {
                                this.$message({
                                message : msg,
                                type : 'error'
                                });
                            } else {
                                this.$message({
                                    message : msg,
                                    type : 'success'
                                });
                            };
                            this.addRecordVisible = false;
					    });
                    }
				});
            },
            consultationOver : function () {
                this.$confirm('确认结束会诊吗？', '提示', {}).then(() => {
                    var user = sessionStorage.getItem('user');
                    user = JSON.parse(user);
                    let para = {
                        doctorid : user.did,
                        oid : 0,
                        sts : 2
                    };
                    var patient = sessionStorage.getItem('patient');
                    if(patient){
                        patient = JSON.parse(patient);
                        para.oid = patient.oid;
                    };
                    if(para.oid === 0){
                        this.$message({
                             message : "当前没有会诊病号",
                            type : 'error'
                        });
                    }else{
                        changestatus(para).then((res) => {
                            let { code , msg  } = res;
                                if (code !== 0) {
                                    this.$message({
                                    message : msg,
                                    type : 'error'
                                    });
                                } else {
                                    this.$message({
                                        message : '会诊已结束',
                                        type : 'success'
                                    });
                                };
                            sessionStorage.removeItem('patient');
                            this.$router.push({ path: '/guahao' });
                        });
                    };
                });
            }
        },
        mounted() {
            var patient = sessionStorage.getItem('patient');
            if(patient){
                patient = JSON.parse(patient);  
            }
            var _this = this;
            //基于准备好的dom，初始化echarts实例
            this.chartLine = echarts.init(document.getElementById('chartLine'));
            this.chartLine2 = echarts.init(document.getElementById('chartLine2'));
            this.chartLine3 = echarts.init(document.getElementById('chartLine3'));
            this.chartLine4 = echarts.init(document.getElementById('chartLine4'));
            this.gethealthData();
        }
    }

</script>

<style scoped>
    .chart-container {
        width: 100%;
        float: left;
    }
    /*.chart div {
        height: 400px;
        float: left;
    }*/
    
    .el-col {
        padding: 30px 20px;
    }
</style>